<template>
    <div class="view">
        <div class="head">
            <div class="litle">
                <div class="d1">
                    <span>{{ curTime }}</span>
                </div>
                <div class="d2">
                    <span>{{ title.head }}</span>
                </div>
            </div>
            <div class="litle-body">
                <div class="li">
                    <div class="p">
                        <img class="img1" src="@/assets/images/right.png" />
                        <span class="p1">{{ title.head1 }}</span>
                        <img class="img2" src="@/assets/images/right.png" />
                    </div>
                    <span class="p2">{{ value.head1 }}</span>
                </div>
                <div class="li">
                    <div class="p">
                        <img class="img1" src="@/assets/images/right.png" />
                        <span class="p1">{{ title.head2 }}</span>
                        <img class="img2" src="@/assets/images/right.png" />
                    </div>
                    <span class="p2">{{ value.head2 }}</span>
                </div>
                <div class="li">
                    <div class="p">
                        <img class="img1" src="@/assets/images/right.png" />
                        <span class="p1">{{ title.head3 }}</span>
                        <img class="img2" src="@/assets/images/right.png" />
                    </div>
                    <span class="p2">{{ value.head3 }}</span>
                </div>
                <div class="li">
                    <div class="p">
                        <img class="img1" src="@/assets/images/right.png" />
                        <span class="p1">{{ title.head4 }}</span>
                        <img class="img2" src="@/assets/images/right.png" />
                    </div>
                    <span class="p2">{{ value.head4 }}</span>
                </div>
                <div class="li">
                    <div class="p">
                        <img class="img1" src="@/assets/images/right.png" />
                        <span class="p1">{{ title.head5 }}</span>
                        <img class="img2" src="@/assets/images/right.png" />
                    </div>
                    <span class="p2">{{ value.head5 }}</span>
                </div>
                <div class="li">
                    <div class="p">
                        <img class="img1" src="@/assets/images/right.png" />
                        <span class="p1">{{ title.head6 }}</span>
                        <img class="img2" src="@/assets/images/right.png" />
                    </div>
                    <span class="p2">{{ value.head6 }}</span>
                </div>
            </div>
        </div>
        <div class="body">
            <div style="width: 30%">
                <div class="body-li">
                    <div class="body-li-litle">
                        <img class="img1" src="@/assets/images/right.png" />
                        <span class="p">{{ title.body1 }}</span>
                        <img class="img2" src="@/assets/images/right.png" />
                    </div>
                    <e-charts class="echarts_1" :option="option1" />
                </div>
                <div class="body-li">
                    <div class="body-li-litle">
                        <img class="img1" src="@/assets/images/right.png" />
                        <span class="p">{{ title.body2 }}</span>
                        <img class="img2" src="@/assets/images/right.png" />
                    </div>
                    <e-charts class="echarts_1" :option="option2" />
                </div>
            </div>
            <div style="width: 40%">
                <div class="body-li">
                    <div class="body-li-litle">
                        <img class="img1" src="@/assets/images/right.png" />
                        <span class="p">{{ title.map }}</span>
                        <img class="img2" src="@/assets/images/right.png" />
                    </div>
                    <e-charts class="echarts_2" :option="option3" />
                </div>
            </div>
            <div style="width: 30%">
                <div class="body-li">
                    <div class="body-li-litle">
                        <img class="img1" src="@/assets/images/right.png" />
                        <span class="p">{{ title.body3 }}</span>
                        <img class="img2" src="@/assets/images/right.png" />
                    </div>
                    <e-charts class="echarts_1" :option="option4" />
                </div>
                <div class="body-li">
                    <div class="body-li-litle">
                        <img class="img1" src="@/assets/images/right.png" />
                        <span class="p">{{ title.body4 }}</span>
                        <img class="img2" src="@/assets/images/right.png" />
                    </div>
                    <e-charts class="echarts_1" :option="option5" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, onMounted, onUnmounted } from "vue"
import { message } from "ant-design-vue"
import { useTime } from "@/utils/timeUtil"
import {
    userLeft01,
    userLeft02,
    userCenter,
    userRight01,
    userRight02,
} from "@/data/report01Data"
import { RePortDataApi } from "@/api/js/reportApi"

const curTime = useTime()

const option1 = userLeft01()
const option2 = userLeft02()
const option3 = userCenter()
const option4 = userRight01()
const option5 = userRight02()

const title = reactive({
    head: "医院大屏驾驶仓",
    head1: "门急诊人次",
    head2: "待诊人数",
    head3: "在院人数",
    head4: "入院人次",
    head5: "出院人次",
    head6: "手术人次",
    body1: "门急诊人次",
    body2: "待诊人数",
    body3: "本月出院人次",
    body4: "手术人次",
    map: "住院情况",
})
const value = reactive({
    head1: "0",
    head2: "0",
    head3: "0",
    head4: "0",
    head5: "0",
    head6: "0",
})

let crob
onMounted(() => {
    RePortDataApi.getThemeName("report01")
        .then((res) => {
            if (res.status == 200) {
                title.head = res.data.head
                title.head1 = res.data.h_ind1
                title.head2 = res.data.h_ind2
                title.head3 = res.data.h_ind3
                title.head4 = res.data.h_ind4
                title.head5 = res.data.h_ind5
                title.head6 = res.data.h_ind6
                title.body1 = res.data.b_ind1
                title.body2 = res.data.b_ind2
                title.body3 = res.data.b_ind3
                title.body4 = res.data.b_ind4
                title.map = res.data.b_map
            } else {
                message.error(res.data)
            }
        })
        .catch((err) => {
            message.error(err.message)
        })
    loadData()
    crob = setInterval(loadData, 1000 * 60)
})
onUnmounted(() => {
    if (crob) clearInterval(crob)
})

const loadData = () => {
    RePortDataApi.getThemeData("report01")
        .then((res) => {
            if (res.status == 200) {
                value.head1 = res.data.simpleData.ind1
                value.head2 = res.data.simpleData.ind2
                value.head3 = res.data.simpleData.ind3
                value.head4 = res.data.simpleData.ind4
                value.head5 = res.data.simpleData.ind5
                value.head6 = res.data.simpleData.ind6
                reloadEchartData(res.data.complexData)
            } else {
                message.error(res.data)
            }
        })
        .catch((err) => {
            message.error(err.message)
        })
}

const reloadEchartData = (data) => {
    let i = 0
    //左上 ind1
    for (let s in data.ind1.inds) {
        option1.value.series[i].name = s
        option1.value.series[i].data = data.ind1.inds[s]
        i++
    }
    option1.value.legend.data = getEchartLegend(data.ind1.inds)
    option1.value.xAxis[0].data = timeSubstr(data.ind1.dims)
    //左下 ind2
    i = 0
    for (let s in data.ind2.inds) {
        option2.value.series[i].name = s
        option2.value.series[i].data = data.ind2.inds[s]
        i++
    }
    option2.value.legend.data = getEchartLegend(data.ind2.inds)
    option2.value.xAxis[0].data = daySubstr(data.ind2.dims)
    //地图 ind3
    // i = 0
    for (let n of data.map.dims) {
        // option3.value.series[2].data = n
        for (let d of option3.value.series[2].data) {
            if (d.name == n) {
                let value = []
                for (let v in data.map.inds) {
                    value.push(data.map.inds[v][data.map.dims.indexOf(n)])
                }
                d.value = value
            }
        }
    }
    //右上 ind4
    i = 0
    let temp = []
    for (let s in data.ind3.inds) {
        i = 0
        for (let d of data.ind3.dims) {
            temp.push({
                value: data.ind3.inds[s][i],
                name: d,
            })
            i++
        }
    }
    option4.value.series[0].data = temp
    option4.value.legend.data = data.ind3.dims
    //右下 ind5
    i = 0
    let indicator = []
    let max = 0
    for (let s in data.ind4.inds) {
        option5.value.series[0].data[0].value = data.ind4.inds[s]
        for (let m of data.ind4.inds[s]) {
            if (parseInt(m) > parseInt(max)) {
                max = m
            }
        }
    }
    max = Math.ceil(max / 10) * 10
    for (let d of data.ind4.dims) {
        indicator.push({
            name: d,
            max: max,
        })
    }
    option5.value.radar.indicator = indicator
}
const getEchartLegend = (data) => {
    let legend = []
    for (let i in data) {
        legend.push(i)
    }
    return legend
}
const timeSubstr = (data) => {
    let time = []
    for (let d of data) {
        time.push(d.substr(5, 5))
    }
    return time
}
const daySubstr = (data) => {
    let time = []
    for (let d of data) {
        time.push(d.substr(0, 10))
    }
    return time
}
</script>

<style scoped>
.view {
    background-color: #063b88;
    background-size: cover;
    height: 100%;
    width: 100%;
}

.head {
    background: url(@/assets/images/top01.png) no-repeat;
    background-size: 100% 100%;
    height: 23vh;
    margin: 0 4vh;
}

.body {
    padding: 0 4vh;
    position: relative;
    display: flex;
}

.li-border {
    padding: 1rem;
    border: 1px solid #1a7cc8;
    border-radius: 0.5rem;
    box-shadow: inset 0 0 0.5rem #1a7cc8;
    background: rgba(1, 85, 166, 0.2);
    overflow: hidden;
}

.litle {
    padding-top: 3.6vh;
    display: flex;
    align-items: center;
}

.litle .d1 {
    width: 30%;
    text-align: center;
    color: #6dc1ff;
    font-size: 1.2rem;
    font-weight: bold;
    transform: rotate(5deg);
    position: relative;
    top: -1rem;
}

.litle .d2 {
    width: 40%;
    text-align: center;
    font-size: 32;
    letter-spacing: 10px;
    font-size: 24px;
    color: beige;
    font-weight: bold;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.litle-body {
    padding-top: 3.6vh;
    display: flex;
    align-items: center;
}

.litle-body .li {
    flex: 1;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    color: #e5e5e5;
    position: relative;
}

.litle-body .li:nth-child(1) {
    top: -2rem;
}
.litle-body .li:nth-child(2) {
    top: -1rem;
}
.litle-body .li:nth-child(5) {
    top: -1rem;
}
.litle-body .li:nth-child(6) {
    top: -2rem;
}

.litle-body .li .p {
    display: flex;
    align-items: center;
    justify-content: center;
}
.litle-body .li .p .img1 {
    width: 0.8rem;
    margin-right: 0.2rem;
    transform: rotate(-90deg);
}

.litle-body .li .p .img2 {
    width: 0.8rem;
    margin-left: 0.2rem;
    transform: rotate(90deg);
}

.litle-body .li .p1 {
    display: flex;
    align-items: center;
    justify-content: center;
}
.litle-body .li .p2 {
    font-size: 1.8rem;
    color: #fff;
    letter-spacing: 0.2rem;
}

.body-li {
    margin-bottom: 1.5vh;
    margin-right: 0.75vh;
    padding: 1rem;
    border: 1px solid #1a7cc8;
    border-radius: 0.5rem;
    box-shadow: inset 0 0 0.5rem #1a7cc8;
    background: rgba(1, 85, 166, 0.2);
    overflow: hidden;
}
.body-li-litle {
    display: flex;
    align-items: center;
    justify-content: center;
}
.body-li-litle .p {
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    color: #e5e5e5;
}
.body-li-litle .img1 {
    width: 0.8rem;
    transform: rotate(-90deg);
    margin-right: 2vh;
}
.body-li-litle .img2 {
    width: 0.8rem;
    transform: rotate(90deg);
    margin-left: 2vh;
}

.echarts_1 {
    width: 100%;
    height: 28vh;
    margin-top: 1.2vh;
}

.echarts_2 {
    width: 100%;
    height: 66.5vh;
    margin-top: 1.2vh;
}
</style>
